<template>
  <div class="app">
     <header class="header">
      <div id="logo">
        <img src="@/assets/img/logo.png" alt="logo" height="40px" />
      </div>

      <!-- 大屏显示完整头部 -->
      <div class="box_body" v-if="isLargeScreen">
        <nav class="nav">
          <router-link
            to="/note"
            :class="['nav-link', isActive('/note') ? 'custom-active' : '']"
          >
            小记
          </router-link>
          <router-link
            to="/category"
            :class="['nav-link', isActive('/category') ? 'custom-active' : '']"
          >
            分类
          </router-link>
          <router-link
            to="/history"
            :class="['nav-link', isActive('/history') ? 'custom-active' : '']"
          >
            历史
          </router-link>
           <div class="search">
          <el-input
            v-model="searchText"
            style="max-width: 600px"
            placeholder="搜索笔记"
            class="input-with-select"
            @change="getSearchText"
          >
            <template #prefix>
              <el-icon class="el-input__icon"><search /></el-icon>
            </template>
          </el-input>
        </div>
        </nav>

        <div class="auth">
           <div>
          <el-button v-if="!userInfo" type="text" class="auth-button" @click="openLoginDialog">登录</el-button>
          <div v-else class="user-info">
            <el-avatar :size="30" :src="userInfo?.avatar_url || defaultAvatar" />
             <el-dropdown @command="handleUserCommand">
              <span class="el-dropdown-link">
                {{ userInfo?.username }}  <el-icon><arrow-down /></el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="profile">个人信息</el-dropdown-item>
                  <el-dropdown-item command="logout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
          <el-switch
            v-model="isDark"
            class="mb-2"
            :active-action-icon="Moon"
            :inactive-action-icon="Sunny"
          />
          <el-button type="primary" @click="sendBlog" icon="Position">发布</el-button>
        </div>
      </div>

      <!-- 小屏显示搜索框和菜单按钮 -->
      <div class="mobile-header" v-if="!isLargeScreen">
        <div class="search">
          <el-input
            v-model="searchText"
            placeholder="搜索笔记"
            @change="getSearchText"
            class="input-with-select"
          >
            <template #prefix>
              <el-icon class="el-input__icon"><search /></el-icon>
            </template>
          </el-input>
        </div>
       <!-- 替换成下拉菜单栏 -->
        <el-dropdown trigger="click" @command="handleUserCommand" :hide-on-click="true">
          <el-button icon="Menu">
            菜单
            <el-icon><arrow-down /></el-icon>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <!-- 导航部分 -->
              <el-dropdown-item>
                <router-link
                  to="/note"
                  :class="['nav-link', isActive('/note') ? 'custom-active' : '']"
                >
                  小记
                </router-link>
              </el-dropdown-item>
              <el-dropdown-item>
                <router-link
                  to="/category"
                  :class="['nav-link', isActive('/category') ? 'custom-active' : '']"
                >
                  分类
                </router-link>
              </el-dropdown-item>
              <el-dropdown-item>
                <router-link
                  to="/history"
                  :class="['nav-link', isActive('/history') ? 'custom-active' : '']"
                >
                  历史
                </router-link>
              </el-dropdown-item>

              <el-dropdown-item divided>

              <el-button v-if="!userInfo" type="text" class="auth-button" @click="openLoginDialog">登录</el-button>
              <div v-else class="user-info-d">
                <el-avatar :size="30" :src="userInfo?.avatar_url || defaultAvatar" />
                <span>{{ userInfo?.username }}</span>
              </div>
              </el-dropdown-item>
               <el-dropdown-item command="profile">个人信息</el-dropdown-item>
                <el-dropdown-item command="logout">退出登录</el-dropdown-item>
              <!-- 分割线 -->
              <el-dropdown-item divided>
                <div style="display:flex;justify-content: center;width: 100%">
                <el-switch
                  v-model="isDark"
                  class="mb-2"
                  :active-action-icon="Moon"
                  :inactive-action-icon="Sunny"
                />
                  </div>
              </el-dropdown-item>

              <el-dropdown-item divided>
                <el-button type="primary" @click="sendBlog" icon="Position">发布</el-button>
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>

      </div>
    </header>

      <!-- 登录弹窗 -->
  <el-dialog
    v-model="loginDialogVisible"
    width="450px"
    custom-class="auth-dialog"
    :before-close="resetLoginForm"
  >
    <div class="dialog-header">
      <div class="dialog-logo">
        <img src="@/assets/img/logo.png" alt="logo" class="logo-image" />
      </div>
      <h2 class="dialog-title">欢迎回来</h2>
      <p class="dialog-subtitle">记录每一刻的灵感</p>
    </div>

    <el-form
      :model="loginForm"
      :rules="loginRules"
      ref="loginFormRef"
      label-position="top"
      class="auth-form"
    >
      <el-form-item label="用户名" prop="username">
        <el-input
          v-model="loginForm.username"
          placeholder="请输入用户名"
          :prefix-icon="User"
          size="large"
          class="form-input"
        />
      </el-form-item>

      <el-form-item label="密码" prop="password">
        <el-input
          v-model="loginForm.password"
          type="password"
          placeholder="请输入密码"
          :prefix-icon="Lock"
          show-password
          size="large"
          class="form-input"
        />
      </el-form-item>

      <el-button
        type="primary"
        size="large"
        class="submit-btn"
        :loading="loginLoading"
        @click="handleLogin"
      >
        {{ loginLoading ? '登录中...' : '立即登录' }}
      </el-button>
    </el-form>

    <div class="auth-footer">
      <span class="footer-text">没有账号？</span>
      <el-button link type="primary" @click="switchToRegister">快速注册</el-button>
    </div>
  </el-dialog>

  <!-- 注册弹窗 -->
  <el-dialog
    v-model="registerDialogVisible"
    width="450px"
    custom-class="auth-dialog"
    :before-close="resetRegisterForm"
  >
    <div class="dialog-header">
      <div class="dialog-logo">
        <img src="@/assets/img/logo.png" alt="logo" class="logo-image" />
      </div>
      <h2 class="dialog-title">加入有为小记</h2>
      <p class="dialog-subtitle">开启你的灵感之旅</p>
    </div>

    <el-form
      :model="registerForm"
      :rules="registerRules"
      ref="registerFormRef"
      label-position="top"
      class="auth-form"
    >
      <el-form-item label="用户名" prop="username">
        <el-input
          v-model="registerForm.username"
          placeholder="请输入用户名（3-16位字符）"
          :prefix-icon="User"
          size="large"
          class="form-input"
        />
      </el-form-item>

      <el-form-item label="电子邮箱" prop="email">
        <el-input
          v-model="registerForm.email"
          placeholder="请输入常用邮箱"
          :prefix-icon="Message"
          size="large"
          class="form-input"
        />
      </el-form-item>

      <el-form-item label="设置密码" prop="password">
        <el-input
          v-model="registerForm.password"
          type="password"
          placeholder="至少包含字母、数字（6-20位）"
          :prefix-icon="Lock"
          show-password
          size="large"
          class="form-input"
        />
      </el-form-item>

      <el-button
        type="primary"
        size="large"
        class="submit-btn"
        :loading="registerLoading"
        @click="handleRegister"
      >
        {{ registerLoading ? '注册中...' : '立即注册' }}
      </el-button>
    </el-form>

    <div class="auth-footer">
      <span class="footer-text">已有账号？</span>
      <el-button link type="primary" @click="switchToLogin">直接登录</el-button>
    </div>
  </el-dialog>



    <!-- 个人信息弹窗 -->
    <el-dialog v-model="profileDialogVisible" width="500px" title="个人信息" >
      <el-form :model="profileForm" label-width="80px">
              <el-form-item label="上传头像">
        <el-upload
          class="avatar-uploader"
          :show-file-list="false"
          :before-upload="handleAvatarSelect"
        >
          <img v-if="profileForm.avatar_url" :src="profileForm.avatar_url" class="avatar" />
          <el-icon v-else><User /></el-icon>
        </el-upload>
      </el-form-item>
      <el-form-item label="选择默认头像">
        <div class="avatar-grid">
          <img
            v-for="avatar in defaultAvatars"
            :key="avatar"
            :src="avatar"
            class="avatar-option"
            @click="selectDefaultAvatar(avatar)"
          />
        </div>
      </el-form-item>
        <el-form-item label="用户名">
          <el-input v-model="profileForm.username" />
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="profileForm.email" />
        </el-form-item>
        <el-form-item label="个人简介">
          <el-input type="textarea" v-model="profileForm.bio" />
        </el-form-item>
      </el-form>
      <div class="dialog-footer">
        <el-button @click="profileDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleProfileSave">保存</el-button>
      </div>
    </el-dialog>

    <!-- 主内容区域 -->
    <main class="content">
      <keep-alive>
        <router-view v-slot="{ Component }">
          <component :is="Component" v-if="$route.meta.keepAlive" />
        </router-view>
      </keep-alive>
      <router-view v-slot="{ Component }" v-if="!$route.meta.keepAlive">
        <component :is="Component" />
      </router-view>
    </main>

    <footer class="footer">
      <p>版权所有 © 2024 有为小记 | <a href="http://www.beian.miit.gov.cn" target="_blank">湘ICP备2024070380号-2</a></p>
    </footer>
  </div>
</template>

<script lang="ts" setup>
import {onMounted, ref} from 'vue';
import {
  ElInput,
  ElButton,
  ElSwitch,
  ElDialog,
  ElForm,
  ElFormItem,
  ElMessage,
  ElUpload,
  ElAvatar,
  ElDropdown,
  ElDropdownMenu,
  ElDropdownItem,
} from 'element-plus';
import {
  Hide,
  User,
  Message,
  ArrowDown,
  Position,
  Search,
  Sunny,
  Moon,
  Menu,
  Lock
} from '@element-plus/icons-vue';
import { useDark, useToggle } from '@vueuse/core';
import { useRoute, useRouter } from 'vue-router';
import {getAction, postAction, uploadAction} from '@/api/manage';
import { Login, User as UserApi } from '@/api/ajaxUrl.config';
import { localCache } from '@/utils/storage';
import defaultAvatar from '@/assets/img/default_avatar.png';
import defaultAvatar1 from '@/assets/img/avatar1.jpg';
import defaultAvatar2 from '@/assets/img/avatar2.jpg';
import defaultAvatar3 from '@/assets/img/avatar3.jpg';
import { useSearchStore } from '@/stores/counter';  // 引入你的 search store

const searchStore = useSearchStore();  // 获取搜索 store
// 默认头像列表
const defaultAvatars = ref([
  defaultAvatar,
  defaultAvatar1,
  defaultAvatar2,
  defaultAvatar3,
]);

// 搜索事件
const searchText = ref('');
const getSearchText = () => {
    console.log(searchText.value)
    searchStore.setSearchText(searchText.value)
};

// 主题切换
const isDark = useDark({ value: true });
const toggleDark = useToggle(isDark);

const route = useRoute();
const router = useRouter();
const isActive = (path: string) => route.path.startsWith(path);
const isLargeScreen = ref(false);  // 控制是否为移动端
const drawerVisible = ref(false);  // 控制抽屉菜单的可见性
const direction = ref<DrawerProps['direction']>('rtl')
// 监测屏幕大小变化，判断是否为移动端
const handleResize = () => {
  console.log(window.innerWidth)
  isLargeScreen.value = window.innerWidth >= 768;
};

// 切换抽屉菜单
const toggleDrawer = () => {
  drawerVisible.value = !drawerVisible.value;
};

// 登录弹窗状态
const loginDialogVisible = ref(false);
const loginForm = ref({
  username: '',
  password: '',
});
const loginRules = ref({
  username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
});
const loginFormRef = ref(null);

// 个人信息弹窗状态
const profileDialogVisible = ref(false);
const profileForm = ref({
  avatar_url: '',
  username: '',
  email: '',
  bio: '',
});

// 用户状态
const isLoggedIn = ref<boolean>(localCache.getCache('isLoggedIn') || false);
const userInfo = ref<object | null>(localCache.getCache('userinfo') || null);

// 登录逻辑
// const handleLogin = () => {
//   loginFormRef.value?.validate(valid => {
//     if (valid) {
//       postAction(Login.login, loginForm.value).then(response => {
//         localCache.setCache('token', response.access);
//         localCache.setCache('isLoggedIn', true);
//         isLoggedIn.value = true;
//         ElMessage.success('登录成功');
//         getUserInfo();
//         loginDialogVisible.value = false;
//       }).catch(() => {
//         ElMessage.error('登录失败');
//       });
//     }
//   });
// };

const handleLogin = () => {
  loginFormRef.value?.validate((valid) => {
    if (!valid) return // 表单验证不通过时直接返回

    postAction(Login.login, loginForm.value)
      .then((res) => {
        // 解构响应数据，提供默认值防止 undefined
        const {
          status = '',
          data = {},
          message = ''
        } = res

        if (status === 'success') {
          // 成功处理
          localCache.setCache('token', data.access || '')
          localCache.setCache('refresh_token', data.refresh || '') // 存储刷新令牌
          localCache.setCache('isLoggedIn', true)

          // // 提交用户信息到状态管理
          // userStore.setUserInfo({
          //   id: data.user_id,
          //   name: data.username // 根据实际接口返回字段调整
          // })

          ElMessage.success(message || '登录成功')
          loginDialogVisible.value = false

          // 执行登录后操作
          getUserInfo()
          router.push('/') // 可选：跳转到首页
        } else {
          // 业务逻辑错误处理
          ElMessage.error(message)

          // 特殊错误码处理（可选）
          if (res.code === 'account_disabled') {
            router.push('/reactivate') // 跳转到账户激活页面
          }
        }
      })
      .catch((error) => {
        // 网络错误或服务器异常处理
        const errorMsg = error.response?.data?.message
          || error.message
          || '请求失败，请检查网络'

        ElMessage.error(errorMsg)

        // 监控上报（可选）
        reportError(error)
      })
  })
}

// 退出登录函数
const handleLogout = () => {
  localCache.deleteCache('token');
  localCache.deleteCache('isLoggedIn');
  localCache.deleteCache('userinfo');
  isLoggedIn.value = false;
  userInfo.value = null;
  ElMessage.success('已退出登录');
};


// 获取用户信息
const getUserInfo = () => {
  getAction(UserApi.userInfo, '').then(response => {
    userInfo.value = response;
    localCache.setCache('userinfo', response);
    // 更新个人信息表单
    profileForm.value.avatar_url = response.avatar_url;
    profileForm.value.username = response.username;
    profileForm.value.email = response.email;
    profileForm.value.bio = response.bio;
    console.log(profileForm)
  });
};

// 处理用户下拉菜单命令
const handleUserCommand = (command: string) => {
  if (command === 'profile') {
    openProfileDialog();
  } else if (command === 'logout') {
    handleLogout();
  }
};

// 打开个人信息弹窗
const openProfileDialog = () => {
  profileDialogVisible.value = true;
};

// 保存的头像文件
const avatarFile = ref<File | null>(null);

// 上传头像时，先将头像保存到本地变量 avatarFile
const handleAvatarSelect = (file: File) => {
  profileForm.value.avatar_url = URL.createObjectURL(file);
  avatarFile.value = file; // 保存文件
  return false; // 阻止默认上传行为
};

// 选择默认头像时，将头像的 URL 转为 Blob，并保存到本地变量 avatarFile
const selectDefaultAvatar = async (avatarUrl: string) => {
  profileForm.value.avatar_url = avatarUrl; // 显示所选头像
  const response = await fetch(avatarUrl);
  const blob = await response.blob();
  const file = new File([blob], "default-avatar.jpg", { type: blob.type });
  avatarFile.value = file; // 保存为文件
  ElMessage.success('选择头像成功');
};

// 保存个人信息并上传头像
const handleProfileSave = async () => {
  const formData = new FormData();
  formData.append('username', profileForm.value.username);
  formData.append('email', profileForm.value.email);
  formData.append('bio', profileForm.value.bio);

  // 如果用户选择了头像文件，则将头像文件添加到表单数据
  if (avatarFile.value) {
    formData.append('avatar', avatarFile.value);
  }

  // 提交表单数据到服务器
  uploadAction(UserApi.userInfo, formData).then(() => {
    ElMessage.success('个人信息更新成功');
    profileDialogVisible.value = false;
    getUserInfo(); // 刷新用户信息
  });
};

// 注册弹窗状态
const registerDialogVisible = ref(false);
const registerForm = ref({
  username: '',
  email: '',
  password: '',
});
const registerRules = ref({
  username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  email: [{ required: true, message: '请输入邮箱', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
});
const registerFormRef = ref(null);

// 注册逻辑
const handleRegister = () => {
  registerFormRef.value?.validate(valid => {
    if (valid) {
      // 调用注册接口
      postAction(UserApi.register, registerForm.value).then(() => {
        ElMessage.success('注册成功');
        registerDialogVisible.value = false;
        openLoginDialog(); // 注册成功后打开登录弹窗
      }).catch(() => {
        ElMessage.error('注册失败');
      });
    }
  });
};

// 打开登录弹窗
const openLoginDialog = () => {
  loginDialogVisible.value = true;
};

// 打开注册弹窗
const switchToRegister = () => {
  loginDialogVisible.value = false;
  registerDialogVisible.value = true;
};

// 切换登录弹窗
const switchToLogin = () => {
  loginDialogVisible.value = true;
  registerDialogVisible.value = false;
};



// 重置登录表单
const resetLoginForm = () => {
  loginForm.value.username = '';
  loginForm.value.password = '';
  loginDialogVisible.value = false;
};

// 重置注册表单
const resetRegisterForm = () => {
  registerForm.value.username = '';
  registerForm.value.email = '';
  registerForm.value.password = '';
  registerDialogVisible.value = false;
};

// 发布功能
const sendBlog = () => {
  if (isLoggedIn.value) {
    router.push({ name: 'blog' });
  } else {
    ElMessage.error('请先登录');
    openLoginDialog();
  }
};

onMounted(()=>{
  handleResize();
  window.addEventListener('resize', handleResize);
  if (isLoggedIn.value) {
    getUserInfo()
  } else {

  }
})
</script>

<style scoped lang="less">
#logo {
  background: rgba(190, 194, 185, 0.62);
  border-radius: 20px;
  padding: 0 10px;
}

.user-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}

.user-info-d {
  display: flex;
  align-items: center;
}

.el-dropdown-link {
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
}

.app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: var(--color-background);
  color: var(--color-text);
}

.header {
  width: 100%;
  background-color: var(--color-background);
  padding: 15px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--color-border);
  position: fixed;
  z-index: 999;
}

.logo {
  font-size: 30px;
  font-weight: bold;
  margin-right: 30px;
  font-family: 'Zhi Mang Xing', cursive;
}

.box_body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-grow: 1;
}

.nav {
  display: flex;
}

.custom-active {
  color: #ff5722;
  font-weight: bold;
  border-bottom: 2px solid #ff5722;
}

.nav-link {
  margin: 0 15px;
  text-decoration: none;
  color: var(--color-text);
  font-size: 15px;
  transition: color 0.3s ease, border-bottom 0.3s ease;
  font-weight: bolder;
}

.nav-link:hover {
  color: #a8b1ff;
  background: none;
}

.search {
  display: flex;
  align-items: center;
  margin-left: 20px;

  :deep(.el-input__inner) {
    padding: 17px 0px;
  }
}

.auth {
  display: flex;
  align-items: center;

  > div {
    display: flex;
    align-items: center;
  }

  > div:nth-child(1):after,
  > div:nth-child(2):after {
    content: '';
    display: inline-block;
    width: 1px;
    height: 16px;
    background-color: #aaaaaa;
    margin: 0 10px;
  }
}

.auth-button {
  margin-left: 10px;
}

.content {
  padding: 20px;
  box-sizing: border-box;
  margin-top: 85px;
  min-height: calc(100vh - 130px);
}

.footer {
  background-color: var(--color-background-haed);
  color: var(--color-text);
  text-align: center;
  padding: 10px;
}

:deep(.el-switch.is-checked .el-switch__core) {
  background-color: #a8b1ff;
}

/* Avatar grid */
.avatar-grid {
  display: flex;
  gap: 10px;
}

.avatar-option {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
}

.avatar-option:hover {
  border: 2px solid #ff5722;
}

/* 优化后的弹窗样式 */
:deep(.el-dialog.auth-dialog) {
  border-radius: 16px !important;
  background: var(--color-dialog-bg);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1) !important;

  .el-dialog__header {
    display: none;
  }

  .el-dialog__body {
    padding: 40px !important;
  }
}

.dialog-header {
  text-align: center;
  margin-bottom: 32px;

  .dialog-logo {
    margin-bottom: 20px;

    img {
      width: 64px;
      height: 64px;
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }
  }

  .dialog-title {
    font-size: 24px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 8px 0;
  }

  .dialog-subtitle {
    font-size: 14px;
    color: var(--color-text-secondary);
  }
}

.auth-form {
  .el-form-item {
    margin-bottom: 24px;

    :deep(.el-form-item__label) {
      font-size: 13px;
      color: var(--color-text-secondary);
      padding-bottom: 6px;
    }
  }

  :deep(.el-input) {
    .el-input__wrapper {
      border-radius: 8px;
      padding: 12px 16px;
      box-shadow: 0 0 0 1px var(--color-border) inset;
      transition: all 0.3s ease;

      &:hover {
        box-shadow: 0 0 0 1px var(--color-primary-light-5) inset;
      }

      &.is-focus {
        box-shadow: 0 0 0 2px var(--color-primary) inset;
      }
    }

    .el-input__prefix {
      display: flex;
      align-items: center;
      padding-right: 8px;

      .el-icon {
        color: var(--color-text-placeholder);
        font-size: 18px;
      }
    }
  }

  .submit-btn {
    width: 100%;
    margin-top: 16px;
    font-weight: 500;
    letter-spacing: 0.5px;
    border-radius: 8px;
    height: 48px;
    transition: all 0.3s ease;

    &:hover {
      opacity: 0.9;
      transform: translateY(-1px);
    }

    &:active {
      transform: translateY(0);
    }
  }
}

.auth-footer {
  margin-top: 24px;
  text-align: center;
  font-size: 13px;

  .footer-text {
    color: var(--color-text-secondary);
  }

  .el-button {
    padding: 0;
    margin-left: 4px;
    vertical-align: baseline;
  }
}

/* 暗色模式适配 */
.dark {
  :deep(.auth-dialog) {
    background: var(--color-background-soft);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3) !important;
  }

  .auth-form :deep(.el-input__wrapper) {
    background: var(--color-background-mute);
  }
}

/* 适配移动端 */
@media (max-width: 768px) {
  .content {
    padding: 20px;
    box-sizing: border-box;
    min-height: calc(100vh - 180px);
    margin-top: 40px;
  }
  .header {
    flex-direction: row;
    justify-content: space-between;
    padding: 10px 15px;
  }

  .box_body {
    display: none;
  }

  .mobile-header {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
  }

  .search {
    flex: 1;
    margin-left: 10px;
    margin-right: 10px;
    :deep(.el-input__inner) {
      padding: 10px 15px;
    }
  }

  .el-button {
    padding: 10px;
  }

  .auth {
    display: none;
  }

  /* 移动端弹窗优化 */
  :deep(.auth-dialog) {
    width: 90% !important;
    margin: 20px;

    .el-dialog__body {
      padding: 24px !important;
    }

    .dialog-header img {
      width: 48px;
      height: 48px;
    }

    .dialog-title {
      font-size: 20px;
    }

    .submit-btn {
      height: 44px;
    }
  }
}

@media (max-width: 480px) {
  .content {
    padding: 20px;
    box-sizing: border-box;
    min-height: calc(100vh - 180px);
    margin-top: 40px;
  }
  .header {
    padding: 5px;
  }

  .logo img {
    height: 30px;
  }

  .search {
    :deep(.el-input__inner) {
      padding: 8px;
    }
  }

  .el-button {
    font-size: 12px;
    padding: 5px;
  }

  .auth {
    display: none;
  }

  .auth-button {
    width: 100%;
    margin-bottom: 10px;
  }

  .auth > div {
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
  }

  .user-info {
    display: flex;
    align-items: center;
  }
}

@media (max-width: 600px) {
  .content {
    padding: 20px;
    box-sizing: border-box;
    min-height: calc(100vh - 83px);
    margin-top: 40px;
  }
  :deep(.el-dialog) {
    width: 90%;
    padding: 15px;
  }

  .dialog-footer {
    flex-direction: column;
  }

  .dialog-footer .el-button {
    width: 100%;
    margin-bottom: 10px;
  }
  .user-info {
    display: flex;
    align-items: center;
  }
}
</style>
